@extends('layouts.app', ['active' => 5])

@section('title')添加人员 -
@endsection

@section('style')
    <link href="{{ asset('plugin/datepicker/css/foundation-datepicker.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('plugin/validation/dist/css/formValidation.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('plugin/validation/css/default.css') }}" rel="stylesheet" type="text/css"/>

@endsection

@section('content')

    <div class="panel panel-default" style="">
        <div class="panel-heading"><i class="fa fa-plus"></i> 添加人员
            @include('person.menu',['active' => 1])
        </div>
        <div class="panel-body">

            @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <ul>
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form class="form-horizontal" id="validateForm" action="{{ url('person') }}" method="POST" enctype="multipart/form-data">
                {!! csrf_field() !!}
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">头像<br/>请选用182*128像素大小图片</label>
                    <div class="col-sm-10" id="avatar_img_div">
                        <img src="{{ url('/') }}/img/avatar_default.png" style="cursor:pointer;width:128px;" id="avatar_img" class="img-thumbnail" title="点击上传图片">

                        <input type="file" style="display:none" name="avatar" id="avatar"  class="form-control" value=""/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">姓名 <span style="color:#d44950">*</span></label>
                    <div class="col-sm-10">
                        <input type="text"   id="name" value="{{ old('name') }}"  class="form-control" required="required" name="name" placeholder="2-10位汉字"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="id_number" class="col-sm-2 control-label">18位身份证号 <span style="color:#d44950">*</span></label>
                    <div class="col-sm-10">
                        <input type="text"    id="id_number" value="{{ old('id_number') }}"  class="form-control" required="required" name="id_number" placeholder="格式如  350602197404131670"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="is_the_city" class="col-sm-2 control-label">是否本市 <span style="color:#d44950">*</span></label>

                    <div class="col-sm-10">
                        <select name="is_the_city" class="form-control">
                            <option value="1" selected="selected">是</option>
                            <option value="0" >否</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="reg_addr" class="col-sm-2 control-label">户籍地 <span style="color:#d44950">*</span></label>
                    <div class="col-sm-10">
                        <div id="distpicker_reg" class="form-inline">
                            <select class="form-control"></select>
                            <select class="form-control"></select>
                            <select class="form-control"></select>
                        </div>
                        <input type="hidden"  class="form-control" required="required" id="reg_addr" name="reg_addr" value="{{ old('reg_addr') }}" placeholder=""/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="temp_addr" class="col-sm-2 control-label">暂住地 <span style="color:#d44950">*</span></label>
                    <div class="col-sm-10">
                        <div id="distpicker_temp" class="form-inline">
                            <select class="form-control"></select>
                            <select class="form-control"></select>
                            <select class="form-control"></select>
                        </div>
                        <input type="hidden"  class="form-control" required="required" id="temp_addr" name="temp_addr" value="{{ old('temp_addr') }}" placeholder=""/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="five_saw_time" class="col-sm-2 control-label">到我市时间 <span style="color:#d44950">*</span></label>
                    <div class="col-sm-10">
                        <input type="text" style="background-color:#fff" id="five_saw_time" onClick="WdatePicker()" readonly value="{{old('five_saw_time')?old('five_saw_time'):date('Y-m-d')}}"  class="form-control" required="required" name="five_saw_time" placeholder=""/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="leave_time" class="col-sm-2 control-label">离开我市时间</label>
                    <div class="col-sm-10">
                        <input type="text" style="background-color:#fff" id="leave_time" onClick="WdatePicker()" readonly placeholder="不能早于来我市时间" value="{{ old('leave_time') }}"    class="form-control" name="leave_time" placeholder=""/>
                    </div>
                </div>

                <div class="form-group">
                    <label for="meet_situation" class="col-sm-2 control-label">见面情况</label>
                    <div class="col-sm-10">
                        <textarea name="meet_situation" maxlength="255"  rows="5" class="form-control"  placeholder="最多255个字符" >{{ old('meet_situation') }}</textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="remark" class="col-sm-2 control-label">我市活动情况</label>
                    <div class="col-sm-10">
                        <textarea name="remark" id="remark" rows="10" class="form-control"  placeholder="">{{old('remark') }}</textarea>

                    </div>
                </div>

                <div class="form-group">
                    <label for="phone" class="col-sm-2 control-label">手机号 <span style="color:#d44950">*</span></label>
                    <div class="col-sm-10">
                        <input type="tel" id="phone"  class="form-control" required="required" name="phone" value="{{ old('phone') }}" placeholder="格式如 17035022222"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="qq" class="col-sm-2 control-label">QQ</label>
                    <div class="col-sm-10">
                        <input type="qq"   class="form-control" id="qq" name="qq"  value="{{ old('qq') }}"  placeholder=""/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="weixin" class="col-sm-2 control-label">微信号</label>
                    <div class="col-sm-10">
                        <input type="text"  class="form-control"  name="weixin" id="weixin" value="{{ old('weixin') }}" placeholder=""/>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">

                        <button type="submit" id="validateSubmit" class="btn btn-success btn-block">添加</button>
                    </div>
                </div>

            </form>
        </div>
    </div>
    <!--
    <div class="main-content-footer">
        <button type="submit" id="validateSubmit" class="btn btn-success btg-lg btn-block">添加</button>

    </div>
    -->



@endsection

@section('script')

    <script type="text/javascript" src="{{ asset('plugin/ckeditor/ckeditor.js') }}"></script>
    <script type="text/javascript" src="{{ asset('plugin/distpicker/js/distpicker.data.js') }}"></script>
    <script type="text/javascript" src="{{ asset('plugin/distpicker/js/distpicker.js') }}"></script>
    <script type="text/javascript" src="{{ asset('plugin/My97DatePicker/WdatePicker.js')}}"></script>
    <script type="text/javascript" src="{{ asset('plugin/validation/dist/js/formValidation.js')}}"></script>
    <script type="text/javascript" src="{{ asset('plugin/validation/dist/js/framework/bootstrap.js')}}"></script>
    <script type="text/javascript" src="{{ asset('plugin/validation/dist/js/language/zh_CN.js')}}"></script>

    <script type="text/javascript">
        CKEDITOR.replace( 'remark' );
    </script>



    <script>
        // 预览图片
        function PreviewImage(fileObj,imgPreviewId,divPreviewId){

            var allowExtention=".jpg,.bmp,.gif,.png";//允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
            var extention=fileObj.value.substring(fileObj.value.lastIndexOf(".")+1).toLowerCase();
            var browserVersion= window.navigator.userAgent.toUpperCase();
            if(allowExtention.indexOf(extention)>-1){

                if(fileObj.files){//HTML5实现预览，兼容chrome、火狐7+等
                    if(window.FileReader){
                        var reader = new FileReader();
                        reader.onload = function(e){
                            document.getElementById(imgPreviewId).setAttribute("src",e.target.result);
                        }
                        reader.readAsDataURL(fileObj.files[0]);
                    }else if(browserVersion.indexOf("SAFARI")>-1){
                        alert("不支持Safari6.0以下浏览器的图片预览!");
                    }
                }else if (browserVersion.indexOf("MSIE")>-1){
                    if(browserVersion.indexOf("MSIE 6")>-1){//ie6
                        document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);
                    }else{//ie[7-9]
                        fileObj.select();
                        if(browserVersion.indexOf("MSIE 9")>-1)
                            fileObj.blur();//不加上document.selection.createRange().text在ie9会拒绝访问
                        var newPreview =document.getElementById(divPreviewId+"New");
                        if(newPreview==null){
                            newPreview =document.createElement("div");
                            newPreview.setAttribute("id",divPreviewId+"New");
                            newPreview.style.width = document.getElementById(imgPreviewId).width+"px";
                            newPreview.style.height = document.getElementById(imgPreviewId).height+"px";
                            newPreview.style.border="solid 1px #d2e2e2";
                        }
                        newPreview.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
                        var tempDivPreview=document.getElementById(divPreviewId);
                        tempDivPreview.parentNode.insertBefore(newPreview,tempDivPreview);
                        tempDivPreview.style.display="none";
                    }
                }else if(browserVersion.indexOf("FIREFOX")>-1){//firefox
                    var firefoxVersion= parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
                    if(firefoxVersion<7){//firefox7以下版本
                        document.getElementById(imgPreviewId).setAttribute("src",fileObj.files[0].getAsDataURL());
                    }else{//firefox7.0+
                        document.getElementById(imgPreviewId).setAttribute("src",window.URL.createObjectURL(fileObj.files[0]));
                    }
                }else{
                    document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);
                }
            }else{
                alert("仅支持"+allowExtention+"为后缀名的文件!");
                fileObj.value="";//清空选中文件
                if(browserVersion.indexOf("MSIE")>-1){
                    fileObj.select();
                    document.selection.clear();
                }
                fileObj.outerHTML=fileObj.outerHTML;
            }
        }

        $(function(){
            $('#avatar_img').click(function(){
                $('#avatar').click();
            });
            $('#avatar').change(function(){
                PreviewImage(this,'avatar_img','avatar_img_div')
            });
        });
    </script>



    <script>
        $(function () {
            $("#distpicker_reg").change(function(){
                var reg_addr = new Array()
                $("#distpicker_reg select").each(function(i){
                    reg_addr[i] = $(this).val();
                });
                $('#reg_addr').val(reg_addr);

            });
            $("#distpicker_reg").distpicker({
                placeholder: false,
                province: "四川省",
                city: "自贡市",
            });
            $("#distpicker_reg").change();

            $("#distpicker_temp").change(function(){
                var temp_addr = new Array()
                $("#distpicker_temp select").each(function(i){
                    temp_addr[i] = $(this).val();
                });
                $('#temp_addr').val(temp_addr);
            });
            $("#distpicker_temp").distpicker({
                placeholder: false,
                province: "四川省",
                city: "自贡市",
            });
            $("#distpicker_temp").change();
        });
    </script>



    <script type="text/javascript">
        $(document).ready(function() {
            // Generate a simple captcha
//            function randomNumber(min, max) {
//                return Math.floor(Math.random() * (max - min + 1) + min);
//            };
//            $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

            $('#validateForm').formValidation({
                message: '格式错误',
                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    name: {
                        validators: {
                            notEmpty: {
                                message: '姓名不能为空'
                            },
                            regexp: {
                                regexp: /^[A-Za-z0-9\u4e00-\u9fa5]{1,10}$/,
                                message: '姓名格式错误'
                            }

                        }
                    },
                    id_number: {
                        validators: {
                            notEmpty: {
                                message: '身份证不能为空'
                            },
                            regexp: {
                                regexp: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                                message: '身份证格式错误'
                            }
                        }
                    },
                    five_saw_time: {
                        validators: {
                            notEmpty: {
                                message: '来我市时间不能为空'
                            },
//                            date: {
//                                format: 'YYYY-DD-MM'
//                            }

                        }
                    },
//                    leave_time: {
//                        validators: {
//                            callback: {
//                                message: '离开时间不能小于到我市时间',
//                                callback: function(value, validator, $field) {
//                                    var leave_time = $('#leave_time').val();
//                                    var five_saw_time = $('#five_saw_time').val();
//                                    if (leave_time.length > 0 && five_saw_time.length > 0 ) {
//                                        if (leave_time < five_saw_time){
//                                            return false;
//                                        }
//                                    }
//                                    return true;
//
//                                }
//                            }
//                        }
//                    },
                    phone: {
                        validators: {
                            notEmpty: {
                                message: '手机号不能为空'
                            },
                            regexp: {
                                regexp:  /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/,
                                message: '手机号格式错误'
                            }
                        }
                    },

                    qq: {
                        validators: {
                            regexp: {
                                regexp:  /^[1-9][0-9]{4,14}$/,
                                message: 'qq号格式错误'
                            }
                        }
                    },

                    weixin: {
                        validators: {
                            regexp: {
                                regexp:  /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/,
                                message: '微信号格式错误'
                            }
                        }
                    },


                }

            });
//
//                $('#leave_time').change(function(){
//                    alert('ok');
//                });

        });
    </script>


@endsection